<template>
  <page-header-wrapper :title="false">
    <a-card class="card" :bordered="false">
      <a-tabs type="card" default-active-key="1">
        <a-tab-pane key="1" tab="填写采购单信息"></a-tab-pane>
<!--        <a-tab-pane key="2" tab="买专利" disabled></a-tab-pane>-->
      </a-tabs>
      <a-form-model
        ref="purchaseForm"
        :model="purchaseForm"
        :rules="purchaseRules"
      >
        <a-divider orientation="left" style="margin-top: 40px">买家购买需求(<span style="color: red;font-size: 13px">注：* 代表必填项</span>)</a-divider>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="关键字/词" prop="tm_name">
              <a-input v-model="purchaseForm.tm_name" placeholder="请输入关键字/词"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="类别" prop="category">
              <a-select v-model="purchaseForm.category" placeholder="请选择类别">
                <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="国家" prop="region">
              <a-select v-model="purchaseForm.region" placeholder="请选择国家">
                <a-select-option v-for="(item,index) in regionOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="采购数量" prop="purchase_num">
              <a-input v-model="purchaseForm.purchase_num" placeholder="请输入采购数量" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="类似群组" prop="groups">
              <a-textarea v-model="purchaseForm.groups" :rows="5" placeholder="请输入类似群组，例如：10002;10002;10005;" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left" style="margin-top: 40px">客户预算代理费(<span style="color: red;font-size: 13px">备注：客户预出价=最终采购价+顾问心理代理费+转让/公正费用【以上费用不包含税票，强烈建议如要开票请开分公司票】</span>)</a-divider>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="客户预算" prop="budget_start">
              <!--              <a-input placeholder="请输入客户预出价"/>-->
              <div style="display: flex;align-items: center">
                <a-input v-model="purchaseForm.budget_start" placeholder="请输入客户预算"/>&nbsp;&nbsp;~&nbsp;&nbsp;<a-input v-model="purchaseForm.budget_end" placeholder="请输入客户预算"/>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="顾问报价" prop="offer_start">
              <!--              <a-input placeholder="请输入顾问心理代理费"/>-->
              <div style="display: flex;align-items: center">
                <a-input v-model="purchaseForm.offer_start" placeholder="请输入顾问报价"/>&nbsp;&nbsp;~&nbsp;&nbsp;<a-input v-model="purchaseForm.offer_end" placeholder="请输入顾问报价"/>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="期望成本" prop="hope_cost_start">
              <!--              <a-input placeholder="请输入最终采购价"/>-->
              <div style="display: flex;align-items: center">
                <a-input v-model="purchaseForm.hope_cost_start" placeholder="请输入期望成本"/>&nbsp;&nbsp;~&nbsp;&nbsp;<a-input v-model="purchaseForm.hope_cost_end" placeholder="请输入期望成本"/>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="客户付款方式" prop="payment_type">
              <a-select v-model="purchaseForm.payment_type" placeholder="请选择客户付款方式">
                <a-select-option v-for="(item,index) in payTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="是否包转让/公正费用" prop="is_tf_fee">
              <a-select v-model="purchaseForm.is_tf_fee" placeholder="请选择是否包转让/公正费用">
                <a-select-option v-for="(item,index) in tfCostOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item style="text-align: right;margin-top: 40px">
              <a-button type="primary" style="margin-right:5px" @click="onSubmit">提交需求</a-button>
              <a-button type="default" @click="reset">重置表单</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { getAddPurchase, postAddPurchase } from '@/api/transaction'

  export default {
    name: 'FillPurchase',
    data () {
      return {
        purchaseForm: {},
        purchaseRules: {
          category: [{ required: true, message: '必须选择类别', trigger: 'blur' }],
          tm_name: [{ required: true, message: '必须输入关键字', trigger: 'blur' }],
          region: [{ required: true, message: '必须选择商标国家', trigger: 'blur' }],
          purchase_num: [{ required: true, message: '必须输入购买数量', trigger: 'blur' }],
          budget_start: [{ required: true, message: '必须输入客户预算', trigger: 'blur' }],
          offer_start: [{ required: true, message: '必须输入顾问报价', trigger: 'blur' }],
          hope_cost_start: [{ required: true, message: '必须输入期望成本', trigger: 'blur' }],
          payment_type: [{ required: true, message: '必须选择交易类型', trigger: 'blur' }],
          groups: [{ required: true, message: '必须输入类似群组', trigger: 'blur' }],
          is_tf_fee: [{ required: true, message: '必须选择是否包含转让费', trigger: 'blur' }]
        },
        categoryOpts: {},
        regionOpts: {},
        tfCostOpts: {},
        payTypeOpts: {}
      }
    },
    created () {
      this.getPurchase()
    },
    methods: {
      getPurchase () {
        const app = this
        getAddPurchase().then(res => {
          if (res.status === 0) {
            app.categoryOpts = res.result.category
            app.regionOpts = res.result.regionOpts
            app.payTypeOpts = res.result.payTypeOpts
            app.tfCostOpts = res.result.tfCostOpts
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onSubmit () {
        const app = this
        const data = {}
        app.$refs.purchaseForm.validate(valid => {
          if (valid) {
            for (const k in app.purchaseForm) {
              data['purchase[' + k + ']'] = app.purchaseForm[k]
            }
            postAddPurchase(data).then(res => {
              if (res.status === 0) {
                app.$warning({
                  title: '添加完成，请前往我的需求单查看',
                  onOk: () => {
                    app.reset()
                  }
                })
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      reset () {
        this.purchaseForm = {}
      }
    }
  }
</script>

<style scoped>

</style>
